import React, { useState } from 'react'
import './login.less'
import { LoginApi } from '@/api'
import { Button, Input, Space, Toast } from 'antd-mobile'

import logo from '@/assets/images/logo.png'
import { useNavigate } from 'react-router-dom'
import toast from '@/components/NewToast'


export default function Login() {
    // 表示当前页面是否是登录面
    const [isLoginPage, setIsLoginPage] = useState(true)

    // 登录按钮的点击事件
    const submitFn = () => {
        // toast('登录成功');
        // 判断是登录还是注册
        isLoginPage ? login() : register()
    }


    const [username, setUserName] = useState('12345678901')
    const [password, setPassword] = useState('wolfcode123')
    const navigate = useNavigate()
    function login() {
        // 判断数据合法性 - 手机 ，密码

        // 数据合法了，就要向服务器发请求
        LoginApi({
            username, password
        }).then(res => {
            if (res.errCode === 0) {
                // 存token
                localStorage.setItem('token', res.data)
                // 提示用户
                toast('登录成功');
                // 跳转页面
                navigate('/')
            } else {
                console.log(2);
                // dispatch(show({
                //     text: '登录失败',
                //     type: 'error'
                // }))
            }
        })
    }

    function register() { }

    return (
        <div className='login'>
            <div className="row">
                <img className='logo' src={logo} alt="" />
            </div>
            <div className="row">
                <Input placeholder='请输入手机号' value={username} onChange={val => { setUserName(val) }} />
            </div>
            <div className="row">
                <Input placeholder='请输入手密码' type='password' value={password} onChange={val => { setPassword(val) }} />
            </div>
            <div className="row">
                <Button onClick={submitFn} color='primary' block size='large'>{isLoginPage ? '登录' : '注册'}</Button>
            </div>
            <div className="row">
                <Button color='primary' fill='none' onClick={() => setIsLoginPage(!isLoginPage)}>
                    去{isLoginPage ? '注册' : '登录'}
                </Button>
            </div>
        </div>
    )
}
